<template>
  <div>
    <a-layout>
      <a-layout-sider class="sidebar" width="256" v-model="collapsed" :trigger="null" collapsible>
        <sidebar :collapsed="collapsed" />
      </a-layout-sider>

      <a-layout v-if="isLogin">
        <a-layout-header class="headbar">
          <headbar :collapsed="collapsed" :username="username" @toggleCollapsed="toggleCollapsed" />
        </a-layout-header>

        <a-layout-content>
          <router-view v-if="havePermisssion && isRouterAlive" style="padding: 8px;" />
          <a-result v-else status="403" title="403" sub-title="抱歉，您无权访问此页面" style="margin-top: 36px;" />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
  import { permissions } from '@/permissions'
  // import { configList } from '@/api/system'
  import { getInfo } from '@/api/user'
  import Cookies from 'js-cookie';

  export default {
    name: 'BaseLayout',
    components: {
      Headbar: () => import('@/components/Headbar/Headbar'),
      Sidebar: () => import('@/components/Sidebar/Sidebar'),
    },
    provide() {
      return {
        reloadPage: () => {
          return this.reloadPage()
        },
      }
    },
    data() {
      return {
        isLogin: false,
        collapsed: false,
        isRouterAlive: true,
      };
    },
    computed: {
      username() {
        return this.$store.state.user.username
      },
      isManager() {
        return this.$store.state.user.isManager
      },
      permissions() {
        return this.$store.state.user.permissions
      },
      havePermisssion() {
        let permission = this.$route.meta.permission;
        return this.isManager || !(permissions[permission] && this.permissions.indexOf(permission) == -1);
      },
    },
    methods: {
      initialize() {
        if (!Cookies.get('access') || !Cookies.get('refresh')) {
          return this.$router.push('/user/login');
        }

        getInfo().then(data => {
          this.isLogin = true;
          // this.getConfig();
          this.$store.commit('setUser', data);

          // // 库存预警
          // if (data.inventory_warnning_count > 0) {
          //   this.$notification.warning({
          //     message: '库存预警',
          //     remark: `您有 ${resp.data.inventory_warnning_count} 个产品超出库存设定范围`,
          //   })
          // }
        });
      },
      getConfig() {
        // configList()
        //   .then(resp => {
        //     this.$store.commit('setConfig', resp.data);
        //   })
        //   .catch(err => {
        //     this.$message.error(err.response.data.error);
        //   });
      },
      toggleCollapsed() {
        this.collapsed = !this.collapsed;
      },
      reloadPage() {
        this.isRouterAlive = false;
        this.$nextTick(() => this.isRouterAlive = true);
      },
    },
    mounted() {
      this.initialize();
    },
  }
</script>

<style scoped>
  .headbar {
    background: #fff;
    padding: 0;
    box-shadow: 0px 1px 10px #7774;
  }

  .sidebar {
    background: #fff;
    overflow: auto;
    box-shadow: 1px 0px 10px #7774;
  }
</style>